Klilknij tu żeby wrócić do wyjaśnienia z-index.
W tym pojemniku, żółty klocek ma position ustawione na "static". Jest to wartość domyślna, nic szczególnego z tym klockiem się nie dzieje. Pozostałe żółte klocki są poprzesuwane. Aby zmienić pozycję elementu można ustalić im inną wartość reguły position, a następnie sterować przesunięciami.
W tym pojemniku, żółty klocek ma position ustawione na "sticky". Oznacza to, że "przylepi" się do szczytu ekranu i tam pozostanie przy przewijaniu strony, aż użytkownik nie schowa całego pojemnika, w którym ten klocek się znajduje. Klocek ten posiada także przesunięcie górne ustalone na 10px - w takiej odległości od szczytu strony pozostanie.
W tym pojemniku, żółty klocek ma position ustawione na "absolute". Oznacza to, że kompletnie ignoruje swoje pierwotne ustawienie (powinien być między dwoma niebieskimi klockami) i ustawia się tam, gdzie ustali się w CSS. Jego pozycję wyraża się przesunięciami: w tym przypadku ma ustawione przesunięcie dolne oraz prawe na 40px.
W tym pojemniku, żółty klocek ma position ustawione na "fixed". Oznacza to, że ten klocek ignoruje swoją pierwotną pozycję, a następnie ustawia się w pewnym, stałym miejscu. Pozostanie tam, niezależnie od tego, jak daleko użytkownik się przewinie na stronie - będzie przylepiony na stałe w tej jednej pozycji. Ten element ma przesunięcie górne 100px i prawe 100px.
W tym pojemniku, żółty klocek ma position ustawione na "relative". Oznacza to, że lekko ignoruje swoje pierwotne ustawienie i dokłada do niego pewne przesunięcie. Dystans tego przesunięcia jest jednak liczony względem jego orygnalnej pozycji. Ten klocek ma przesunięcie górne i lewe na 30px.
Dzięki stosowaniu różnych ustawień atrybutu "position" można stworzyć elementy o różnym zachowaniu przy przewijaniu się strony. Można także "przyczepić" pewne elementy na stałe w wybrane miejsce. Dodatkowo, "position" pozwala na zastosowanie reguły "z-index", służącej do ustalenia kolejności nawarstwiania się na siebie obiektów.